<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>

    <ul class="menus" id="menus" style="display: none;">
        <li>删除</li>
        <li>添加</li>
        <li>修改</li>
    </ul>


    <script>
        const menus = document.getElementById('menus');

        window.oncontextmenu = function (e) {
            // 1. 取消右击默认行为
            e.preventDefault();
            // 2. 获取（窗口）坐标
            const x = e.clientX;
            const y = e.clientY;
            // 3. 根据坐标设定菜单位置
            menus.style.left = x + 'px';
            menus.style.top = y + 'px';
            // 4. 显示菜单
            menus.style.display = '';
        }

        window.onclick = function () {
            // 5. 点击任意位置隐藏菜单
            menus.style.display = 'none';
        }


    </script>

</body>

</html>